<template>
  <div class="app-container">
    <div class="content-wrap">
      <global-header :user="currentUser"></global-header>
      <loader v-if="isLoading"></loader>
      <router-view></router-view>
    </div>
    <footer class="site-footer">
      <div class="container">
        <div class="footer-content">
          <div class="footer-brand">
            <h5 class="mb-3">者也专栏</h5>
            <p class="text-muted small">© 2025 者也专栏 版权所有</p>
          </div>
          <div class="footer-links">
            <ul class="nav flex-column">
              <li class="nav-item"><a href="#" class="nav-link">课程</a></li>
              <li class="nav-item"><a href="#" class="nav-link">文档</a></li>
              <li class="nav-item"><a href="#" class="nav-link">联系</a></li>
              <li class="nav-item"><a href="#" class="nav-link">关于我们</a></li>
            </ul>
          </div>
          <div class="footer-social">
            <h6 class="mb-3">关注我们</h6>
            <div class="social-links">
              <a href="#" class="me-2"><i class="bi bi-wechat"></i></a>
              <a href="#" class="me-2"><i class="bi bi-weibo"></i></a>
              <a href="#" class="me-2"><i class="bi bi-github"></i></a>
            </div>
          </div>
        </div>
      </div>
    </footer>
  </div>
</template>

<style>
.app-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.content-wrap {
  flex: 1;
}

.site-footer {
  background-color: #f8f9fa;
  padding: 2rem 0;
  border-top: 1px solid #e9ecef;
}

.footer-content {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  justify-content: space-between;
}

.footer-brand h5 {
  color: #212529;
  font-weight: 600;
}

.footer-links .nav-link {
  padding: 0.25rem 0;
  color: #6c757d;
}

.footer-links .nav-link:hover {
  color: #0d6efd;
}

.social-links a {
  color: #6c757d;
  font-size: 1.25rem;
}

.social-links a:hover {
  color: #0d6efd;
}

@media (max-width: 768px) {
  .footer-content {
    flex-direction: column;
    gap: 1.5rem;
  }
}
</style>

<script lang="ts">
import { watch,defineComponent ,reactive , ref,computed, useAttrs, onMounted} from 'vue'
import store from './store';
import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap-icons/font/bootstrap-icons.css'
import GlobalHeader from './components/GlobalHeader.vue';
import { useStore } from 'vuex';
import Loader from './components/Loader.vue';
// import {RuleProp} from './components/ValidateInput.vue';
// import Message from './components/Message.vue';
// type RulesProp = RuleProp[]
import {GlooalDataProps} from './store'
import createMessage from './components/createMessage';
import axios from 'axios';

export default defineComponent({
  name: 'App',
  components: {
   
    GlobalHeader,
    Loader,
    
   
    

  },
  setup(){
   const store = useStore<GlooalDataProps>()
   const currentUser = computed(()=>store.state.user)
   const isLoading = computed(()=>store.state.loading)
   const token = computed(()=>store.state.token)
   const error =computed(()=>store.state.error)
   watch(()=> error.value.status, ()=>{
    const {status,message} = error.value
    if(status && message){
      createMessage(message,'error')
      
    }
   })
   onMounted(()=>{
    if(!currentUser.value.isLogin && token.value){
      axios.defaults.headers.common['Authorization']=`Bearer ${token.value}`
      store.dispatch('fetchCurrentUser')
    }
   })
    return {
    
      currentUser,
      isLoading,
      error
   
    }
  }
})
</script>

<style>
/* #app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
} */
</style>
